@value default-dark-gray from 'canvas-editor/styles/theme';
@value default-extra-light-gray from 'canvas-editor/styles/theme';
@value default-light-gray from 'canvas-editor/styles/theme';
@value default-red from 'canvas-editor/styles/theme';

.canvas-block-url {
  composes: canvas-block-card from 'canvas-editor/components/canvas-block-card/styles';
}

.main {
  display: flex;
}

.main-content {
  flex: 1;
  margin-right: 1rem;
}

.header {
  align-items: center;
  display: flex;
}

.title {
  font-weight: 600;
}

.provider-icon {
  display: block;
  fill: var(--dark-gray, default-dark-gray);
  height: 24px;
  margin-right: 8px;
  width: 24px;
}

.provider-icon--error {
  fill: var(--red, default-red);
}

.text {
  color: var(--dark-gray, default-dark-gray);
  margin-top: 0.25em;
}

.thumbnail {
  border-radius: 4px;
}

.fields {
  display: flex;
  flex-wrap: wrap;
}

.field {
  margin-top: 0.5rem;
  width: 100%;
}

.field--short {
  width: 50%;
}

.field-title {
  font-weight: 600;
}

.field-value {
  color: var(--dark-gray, default-dark-gray);
}

.labels {
  display: flex;
  font-size: 0.875em;
  margin-top: 0.5rem;
}

.label {
  align-items: center;
  border-radius: 3px;
  display: flex;
  margin-right: 0.5em;
}

.label-icon {
  margin-right: 0.25em;
}

.auth-component {
  background: var(--extra-light-gray, default-extra-light-gray);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  box-shadow: 0 1px 1px var(--light-gray, default-light-gray) inset;
  text-align: center;
}

.auth-component a:link,
.auth-component a:visited {
  color: var(--dark-gray, default-dark-gray);
}

.canvas-block-url--needs-auth {
  padding: 0;
}

.canvas-block-url--needs-auth .main,
.canvas-block-url--needs-auth .auth-component {
  padding: 0.75rem;
}

.canvas-block-url--frameless {
  border: none;
  padding: 0;
}

.canvas-block-url--frameless[data-card-block-selected=true] {
  border: none;
  box-shadow: none;
}

.is-selected {
  composes: is-selected from 'canvas-editor/components/canvas-block/styles';
}
